<template>
	<view class="bar" :style="`--color: ${color}`">
		<view class="bar_item" :style="`--height: ${item.number < 20 ? 20:item.number}%`" v-for="(item, index) in data"
			:key="index">
			<view class="bar_item_full">
				<view class="bar_item_full_number">{{item.number}}</view>
			</view>

			<view class="bar_item_name">{{item.name}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	defineProps({
		color: {
			type: String,
			default: "#67c8f2"
		}
	})
	let data = ref([{
			name: "1月",
			number: 0
		},
		{
			name: "2月",
			number: 0
		},
		{
			name: "3月",
			number: 0
		},
		{
			name: "4月",
			number: 0
		},
		{
			name: "5月",
			number: 0
		},
		{
			name: "6月",
			number: 30
		},
		{
			name: "7月",
			number: 0
		},
		{
			name: "8月",
			number: 56
		},
		{
			name: "9月",
			number: 91
		},
		{
			name: "10月",
			number: 62
		},
		{
			name: "11月",
			number: 0
		},
		{
			name: "12月",
			number: 0
		},
	])
</script>

<style lang="scss" scoped>
	.bar {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0 20rpx;
		border-bottom: 2rpx solid var(--color);
		height: 100rpx;
		position: relative;
		margin: 30rpx 0 40rpx;

		&_item {
			background: var(--color);
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			height: var(--height);
			width: 25rpx;
			position: relative;

			&_full {
				position: relative;

				&_number {
					font-size: 24rpx;
					position: absolute;
					top: -35rpx;
					color: var(--color);
					text-align: center;
					left: 50%;
					transform: translate(-50%);
				}


			}

			&_name {
				font-size: 20rpx;
				position: absolute;
				bottom: -40rpx;
				left: 50%;
				transform: translate(-50%);
				width: 60rpx;
				text-align: center;
			}
		}
	}
</style>